<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>组件通信</title>
  <script src="./vue.js"></script>
</head>
<body>
<div id="app">
  <!-- A嵌套B组件 B组件又嵌套C组件 -->
  <a-component></a-component>
</div>
<script>
  // 1. 父向子传值  
        // 1.1 父亲 <zujian titile="" :id="'xxx'" ..
        // 1.2 儿子 props: {title: String, id: {type: Number, default: 1}}或props: ['title', 'id']
        // 以后推荐props: {}这种方式接受属性 可以对接受的值进行数据校验
  // 2. 子向父传值（父亲像儿子传递一个函数 儿子调用同时传递参数或发布订阅模式）
        // 2.1 父亲 <zujian v-on:约定名字="函数" 在methods中定义回调函数 形参
        // 2.2 儿子 this.$emit(约定名字, 实参)
  // 3. 事件总线 (非父子)
        // 3.1 创建事件总线 var bus = new Vue()
        // 3.2 通过事件总线订阅 bus.$on('公众号id', (v) => { // v形参})
        // 3.3 通过事件总线发布 bus.$emit('公众号id', 实参消息)
  // 4. vuex 状态共享  （一般ui框架不会使用vuex 因为很简单 不可能使用vant等ui库强制我们必须使用vuex）
  // 5. $attrs/$listeners A嵌套B组件 B组件又嵌套C组件 A组件传递属性给C组件
        // v-bind="$attrs" 可以通过$attrs把接受到的属性继续往下传递
        // v-on="$listeners" 可以通过$listeners把事件传递下去
  // 6. 后代传值 provide inject （类似react provider提供者 消费者）
        // 6.1 通过provide 注入原始家产 (用法基本和data是一直的)
        // 6.2 通过inject接受 (和props用法基本上是一一致)
  Vue.component('a-component', {
    data () {
      return {
        jc1: 100000000
      }
    },
    provide () {
      return {
        jc: this.jc1 // 通过获取自己data中数据然后将其注入给后代
      }
    },
    template: `<div>
      我是A组件--{{jc}}
      <b-component></b-component>
    </div>`
  })
  Vue.component('b-component', {
    inject: ['jc'],
    template: `<div>
      我是B组件--{{jc}}
      <c-component></c-component>
    </div>`
  })
  Vue.component('c-component', {
    inject: ['jc'],
    template: `<div>我是C组件--{{jc}}</div>`
  })
  var vm = new Vue({
    el: '#app'
  })
</script>
</body>
</html>
